<template>
  <div class="app-container">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
    <el-menu-item index="1">节次设置</el-menu-item>
    </el-menu>

    <p style="margin-left:20px">
      <el-divider content-position="left">上午</el-divider>
    </p>
    <el-table :data="tableDataMorning" border >
    <el-table-column prop="coseCode" label="节次" width="355"> </el-table-column>
    <el-table-column prop="name" label="开始时间">
      <template slot-scope="scope">
        <el-time-picker v-model="scope.row.coseBeginTime"
          arrow-control
          :picker-options="{
            selectableRange: '06:00:00 - 20:00:00'
          }" placeholder="选择时间"
          value-format="HH:mm:ss"
          :disabled="isOpenUpdate"
          >
        </el-time-picker>
      </template>
    </el-table-column>

    <el-table-column prop="address" label="结束时间"  >
      <template slot-scope="scope">
        <el-time-picker
          v-model="scope.row.coseEndTime"
          :picker-options="{
            selectableRange: '06:00:00 - 20:00:00'
          }"
        placeholder="选择时间"
        value-format="HH:mm:ss"
        :disabled="isOpenUpdate"
        >
      </el-time-picker>
      </template>
      
    </el-table-column>
  </el-table>



<p style="margin-left:20px">
  <el-divider content-position="left">下午</el-divider>
</p>
  <el-table :data="tableDataAfternoon" border >
    <el-table-column prop="coseCode" label="节次" width="355"> </el-table-column>
    <el-table-column prop="name" label="开始时间" >
      <template slot-scope="scope">
        <el-time-picker
          v-model="scope.row.coseBeginTime"
          :picker-options="{
            selectableRange: '06:00:00 - 20:00:00'
          }"
          placeholder="选择时间"
          value-format="HH:mm:ss"
          :disabled="isOpenUpdate"
          >
        </el-time-picker>
      </template>
        
    </el-table-column>
    <el-table-column prop="address" label="结束时间"  >
      <template slot-scope="scope">
        <el-time-picker v-model="scope.row.coseEndTime"
        :picker-options="{
          selectableRange: '06:00:00 - 20:00:00'
        }"
        placeholder="选择时间"
        value-format="HH:mm:ss"
        :disabled="isOpenUpdate"
        >
      </el-time-picker>
      </template>
      
    </el-table-column>
  </el-table>
  <div slot="footer" class="dialog-footer" style="text-align: center; margin-top: 20px;">
      <el-button type="primary" @click="submitData" size="mini" icon="el-icon-check" v-if="!isOpenUpdate">保存</el-button>
      <el-button type="success" @click="updateData" size="mini" icon="el-icon-edit" v-if="isOpenUpdate">开启修改</el-button>
      <el-button @click="resetUpdate"  icon="el-icon-close" size="mini">撤销修改</el-button>
  </div>



  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { sessionsList, createOrUpdate} from "@/api/baseData/sectiontimemanagement";
export default {
  // import引入的组件需要注入到对象中才能使用
  
  components: {},
  data() {
    // 这里存放数据
    return {
      activeIndex: "1",
      isOpenUpdate:true,
      tableDataMorning: [{
          coseCode: '1',
          coseBeginTime: '',
          coseEndTime: ''
        },{
          coseCode: '2',
          coseBeginTime: '',
          coseEndTime: ''
        },{
          coseCode: '3',
          coseBeginTime: '',
          coseEndTime: ''
        },{
          coseCode: '4',
          coseBeginTime: '',
          coseEndTime: ''
        }],
   
        tableDataAfternoon: [{
          coseCode: '5',
          coseBeginTime: '',
          coseEndTime: ''
        }, {
          coseCode: '6',
          coseBeginTime: '',
          coseEndTime: ''
        }, {
          coseCode: '7',
          coseBeginTime: '',
          coseEndTime: ''
        }, {
          coseCode: '8',
          coseBeginTime: '',
          coseEndTime: ''
        }]
   
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    resetUpdate(){
      this.tableDataMorning=[]
      this.tableDataAfternoon=[]

      sessionsList({pageSize:20,pageNum:1}).then(resp=>{
        for(let i=0;i<resp.data.list.length;i++){
          if(i<4){
            console.log(resp.data.list[i])
            this.tableDataMorning.push(resp.data.list[i])
          }else{
            this.tableDataAfternoon.push(resp.data.list[i])
          }
        }
        this.isOpenUpdate = true
      })
    },
    updateData(){
      this.isOpenUpdate = false
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    submitData(){
      let allData = []
      allData.push(...this.tableDataMorning)
      allData.push(...this.tableDataAfternoon)
      console.log(allData)
      for(let i=0; i<allData.length;i++){
       const flag = this.checkTimeIntersection(allData,allData[i])
       if(!flag) return
      }
      createOrUpdate(allData).then(resp=>{
        this.$message({
                message: '保存成功',
                type: 'success'
              });
              this.isOpenUpdate=true
      })
    },
    //检查时间交集
    checkTimeIntersection(allData,item){
      if(item.coseBeginTime && item.coseEndTime){
        console.log('aa',item)
        console.log('bb',allData)
        for(let i=0;i<allData.length;i++){
          if(allData[i].coseCode!=item.coseCode && 
            ((item.coseBeginTime >= allData[i].coseBeginTime &&  item.coseBeginTime<=allData[i].coseEndTime) || 
            (item.coseEndTime >= allData[i].coseBeginTime   &&  item.coseEndTime<=allData[i].coseEndTime)) ){
              
              this.$message({
                message: '时间有冲突，请检查后再提交',
                type: 'warning'
              });
              return false
          }
        }
      }else{
        this.$message({
                message: '节次时间不能为空，请填写后提交',
                type: 'warning'
              });
              return false
      }
      
      return true
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.tableDataMorning=[]
    this.tableDataAfternoon=[]
    sessionsList({pageSize:20,pageNum:1}).then(resp=>{
      for(let i=0;i<resp.data.list.length;i++){
        if(i<4){
          console.log(resp.data.list[i])
          this.tableDataMorning.push(resp.data.list[i])
        }else{
          this.tableDataAfternoon.push(resp.data.list[i])
        }
      }

    })
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
// @import url(); 引入公共css类
</style>
